<template>
  <div>
	  <li>
		  <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
			  {{model.name}}
			  <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
		  </div>
		  <ul v-show="open" v-if="isFolder">
			  <item class="item" v-for="model in model.children" :model="model">
			  </item>
			  <li class="add" @click="addChild">+</li>
		  </ul>
	  </li>
  </div>
</template>
<script>
	import item from "@/components/Tree-item.vue"

	export default{
		name: 'Tree-item',
		props: {
			model: Object
		},
	  data () {
	    return{
	      open: false
	    }
	  },
		computed: {
			isFolder () {
				return this.model.children &&
												this.model.children.length
			}
		},
		methods: {
			toggle () {
				if(this.isFolder) {
					this.open = !this.open
				}
			},
			changeType () {
				if(!this.isFolder) {
					Vue.set(this.model, 'children', [])
					this.addChild()
					this.open = true
				}
			},
			addChild () {
				this.model.children.push({
					name: 'new stuff'
				})
			}
		},
		components: {
			item
		}
	}
</script>

<style>

</style>